<template>
    <div class="app-container">
        <el-form ref="searchForm" inline :model="searchForm" style="position:relative;">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="加盟区域：" prop="districtId">
                        <el-cascader clearable :options="districtList" :props="optionProps" v-model="searchForm.districtId" change-on-select></el-cascader>
                    </el-form-item>
                    <el-form-item label="加盟类型：" prop="merchantTypeId">
                        <el-select clearable v-model="searchForm.merchantTypeId" placeholder="请选择">
                            <el-option v-for="item in merchantTypeOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公司名称：" prop="companyName">
                        <el-input clearable v-model="searchForm.companyName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="负责人电话：" prop="principalPhone">
                        <el-input clearable v-model="searchForm.principalPhone" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-button @click="init('search')" type="primary">查询</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button @click="addClick" type="primary" style="position: absolute;right: 0;">添加商家</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="districtName" label="加盟区域" align="center"></el-table-column>
            <!-- <el-table-column prop="merchantTypeName" label="加盟类型" align="center"></el-table-column> -->
            <el-table-column label="logo" align="center">
                <template slot-scope="scope">
                    <!-- <img v-if="scope.row.logo" :src="scope.row.showpic" width="50" height="50" alt="/图片" @click="lookPic(scope.row.showpic)"> -->
                    <img v-if="scope.row.logo" :src="scope.row.logo" width="50" height="50" alt="/图片" @click="lookPic(scope.row.logo)">
                    <img v-else src="@/assets/image/default.png" width="50" height="50" alt="/图片">
                </template>
            </el-table-column>
            <el-table-column prop="companyName" label="公司名称" align="center"></el-table-column>
            <el-table-column prop="principal" label="负责人" align="center"></el-table-column>
            <el-table-column prop="principalPhone" label="负责人电话" align="center" width="110"></el-table-column>
            <el-table-column prop="servicePhone" label="服务电话" align="center" width="110"></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="franchiseFee" label="加盟费用" align="center"></el-table-column>
            <el-table-column prop="integral" label="当前积分" align="center"></el-table-column>
            <el-table-column prop="startTime" label="加盟开始时间" width="160" align="center"></el-table-column>
            <el-table-column prop="endTime" label="加盟过期时间" width="160" align="center"></el-table-column>
            <el-table-column prop="authorizationTime" label="授权时间" width="160" align="center"></el-table-column>
            <el-table-column label="操作" width="160" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="detailsClick(scope.row)" type="primary" plain size="mini">详情</el-button>
                    <el-button @click.stop="delClick(scope.row)" type="danger" plain size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements"></el-pagination>
        <!-- 弹框 -->
        <el-dialog :visible.sync="showDialog" width="1000px">
            <!-- 手机号筛选 -->
            <el-form ref="merchantSearchForm" :model="merchantSearchForm" label-position="left" label-width="80px" inline>
                <el-form-item label="手机号：" prop="phone">
                    <el-input v-model="merchantSearchForm.phone"></el-input>
                </el-form-item>
                <el-button @click="addClick" type="primary">查询</el-button>
            </el-form>
            <!-- 加盟申请 -->
            <el-table :data="merchantApplytableData" highlight-current-row border @current-change="handleCurrentChange" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="applyStatus" :formatter="applyStatusFun" label="申请状态" align="center"></el-table-column>
                <el-table-column prop="companyName" label="公司名称" align="center"></el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="districtName" label="区域" align="center"></el-table-column>
                <el-table-column prop="merchantTypeName" label="加盟商类型" align="center" width="100"></el-table-column>
                <el-table-column prop="phone" label="联系电话" align="center" width="100"></el-table-column>
                <el-table-column prop="principal" label="负责人" align="center"></el-table-column>
                <el-table-column prop="mobile" label="用户" align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @current-change="merchantApplyGetList" layout="total, prev, pager, next, jumper" :total="merchantApplyPageData.totalElements" style="margin-top: 10px;"></el-pagination>
            <el-form v-show="addMerchantData" ref="merchantDataForm" :rules="merchantRules" :model="merchantDataForm" inline label-position="left" label-width="120px" style="margin: 30px 50px 0px;">
                <el-divider>基本信息</el-divider>
                <el-row style="margin-top: 30px;">
                    <el-col :span="12">
                        <el-form-item label="Logo：" prop="name">
                            <el-upload class="avatar-uploader" action="" :http-request="UploadImage" :show-file-list="false" :before-upload="beforeAvatarUpload" >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100%">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="区域：" prop="districtId">
                            <el-cascader :options="districtList" :props="optionProps" v-model="merchantDistrictId" change-on-select placeholder="必选项。请选择区域" style="width: 270px"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="加盟商类型：" prop="merchantTypeId">
                            <el-select clearable v-model="merchantDataForm.merchantTypeId" placeholder="必选项。请选择加盟商类型" style="width: 270px">
                                <el-option v-for="item in merchantTypeOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="公司名称：" prop="companyName">
                            <el-input v-model="merchantDataForm.companyName" placeholder="必填项。请输入公司名称" style="width: 270px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址：" prop="address">
                            <el-input v-model="merchantDataForm.address" placeholder="必填项。请输入 街道（镇） / 门牌号" style="width: 270px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人：" prop="principal">
                            <el-input v-model="merchantDataForm.principal" placeholder="必填项。请输入负责人" style="width: 270px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人电话：" prop="principalPhone">
                            <el-input v-model="merchantDataForm.principalPhone" placeholder="必填项。请输入负责人电话" style="width: 270px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务电话：" prop="servicePhone">
                            <el-input v-model="merchantDataForm.servicePhone" placeholder="必填项。请输入服务电话" style="width: 270px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述：" prop="description">
                            <el-input v-model="merchantDataForm.description" placeholder="必填项。请输入描述" type="textarea" style="width: 270px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="加盟费用：" prop="franchiseFee">
                            <el-input v-model="merchantDataForm.franchiseFee" placeholder="必填项。请输入加盟费用" type="number" min="0" style="width: 270px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="加盟开始时间：" prop="startTime">
                            <el-date-picker v-model="merchantDataForm.startTime" type="datetime"  :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd HH:mm:ss" placeholder="必选项。请选择加盟开始时间" style="width: 270px"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="加盟过期时间：" prop="endTime">
                            <el-date-picker v-model="merchantDataForm.endTime" type="datetime"  :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="必选项。请选择加盟过期时间" style="width: 270px"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="授权时间：" prop="authorizationTime">
                            <el-date-picker v-model="merchantDataForm.authorizationTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="必选项。请选择授权时间" style="width: 270px"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="锁定：" prop="locked">
                            <el-select v-model="merchantDataForm.locked" placeholder="必选项。请选择锁定状态" style="width: 270px">
                                <el-option v-for="item in lockedOpt" :key="item.value" :label="item.name" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider>服务</el-divider>
                <el-button @click="addService" type="primary" size="mini" plain icon="el-icon-circle-plus-outline">添加服务</el-button>
                <div v-if="serviceContent">
                    <el-form inline style="margin-top: 20px;">
                        <el-form-item label="所选服务：" style="display: block;">
                            <el-tag v-for="(item,index) in multipleSelection" :key="index" closable @close="handleClose(item,index)" style="margin-right: 3px;">{{item.name + '【' + item.serviceCategoryName + '】'}}</el-tag>
                        </el-form-item>
                        <el-form-item label="服务分类：" prop="serviceCategoryId">
                            <el-cascader clearable :options="serviceCategoryOpt" :props="optionProps" v-model="serviceCategoryId" change-on-select></el-cascader>
                        </el-form-item>
                        <el-button @click="serviceList" type="primary">查询服务分类</el-button>
                    </el-form>
                    <el-table :data="serviceTableData" ref="multipleTable" style="width: 100%;" border row-key="id" id="treeTable" @select="handleSelectionChange" @select-all="selectAll">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column prop="name" label="名称" width="180" align="center" ></el-table-column>
                        <el-table-column prop="serviceLevelName" label="服务级别" width="180" align="center" ></el-table-column>
                        <el-table-column prop="serviceCategoryName" :formatter="serviceCategoryNameFun" label="服务分类" width="180" align="center" ></el-table-column>
                        <el-table-column prop="summary" label="摘要" align="center" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination @current-change="serviceGetList" layout="total, prev, pager, next, jumper" :total="servicePageData.totalElements"></el-pagination>
                </div>
                <el-form-item style="text-align: center;width: 100%;">
                    <el-button @click="addSubmit('merchantDataForm')" type="primary">添加商家</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :visible.sync="showDetailDialog" width="1000px">
            <el-form ref="merchantDataForm" :rules="merchantRules" :model="merchantDataForm" label-position="left" label-width="120px" style="margin: 0px 30px;">
                <el-tabs type="border-card" style="min-height: 500px;">
                    <el-tab-pane label="基本" style="margin-top: 20px;">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="Logo：" prop="name">
                                    <el-upload class="avatar-uploader" action="" :http-request="UploadImage" :show-file-list="false" :before-upload="beforeAvatarUpload" >
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100%">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="区域：" prop="districtId">
                                    <el-cascader :options="districtList" :props="optionProps" v-model="merchantDistrictId" change-on-select style="width: 270px" placeholder="必选项。请选择区域"></el-cascader>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="加盟商类型：" prop="merchantTypeId">
                                    <el-select clearable v-model="merchantDataForm.merchantTypeId" placeholder="必选项。请选择加盟商类型" style="width: 270px">
                                        <el-option v-for="item in merchantTypeOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="公司名称：" prop="companyName">
                                    <el-input v-model="merchantDataForm.companyName" placeholder="必填项。请输入公司名称" style="width: 270px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址：" prop="address">
                                    <el-input v-model="merchantDataForm.address" placeholder="必填项。请输入 街道（镇） / 门牌号" style="width: 270px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="负责人：" prop="principal">
                                    <el-input v-model="merchantDataForm.principal" placeholder="必填项。请输入负责人" style="width: 270px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="负责人电话：" prop="principalPhone">
                                    <el-input v-model="merchantDataForm.principalPhone" placeholder="必填项。请输入负责人电话" style="width: 270px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="服务电话：" prop="servicePhone">
                                    <el-input v-model="merchantDataForm.servicePhone" placeholder="必填项。请输入服务电话" style="width: 270px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="描述：" prop="description">
                                    <el-input v-model="merchantDataForm.description" placeholder="必填项。请输入描述" type="textarea" style="width: 270px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="加盟费用：" prop="franchiseFee">
                                    <el-input v-model="merchantDataForm.franchiseFee" placeholder="必填项。请输入加盟费用" type="number" min="0" style="width: 270px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="加盟开始时间：" prop="startTime">
                                    <el-date-picker v-model="merchantDataForm.startTime" type="datetime" :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd HH:mm:ss" placeholder="必选项。请选择加盟开始时间" style="width: 270px"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="加盟过期时间：" prop="endTime">
                                    <el-date-picker v-model="merchantDataForm.endTime" type="datetime" :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="必选项。请选择加盟过期时间" style="width: 270px"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="授权时间：" prop="authorizationTime">
                                    <el-date-picker v-model="merchantDataForm.authorizationTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="必选项。请选择授权时间" style="width: 270px"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="经度：" prop="longitude">
                                    <el-input v-model="merchantDataForm.longitude" type="number" disabled style="width: 270px" placeholder="必填项。请输入经度"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="纬度：" prop="latitude">
                                    <el-input v-model="merchantDataForm.latitude" type="number" disabled style="width: 270px" placeholder="必填项。请输入纬度"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="锁定：" prop="locked">
                                    <el-select v-model="merchantDataForm.locked" placeholder="必选项。请选择锁定状态" style="width: 270px">
                                        <el-option v-for="item in lockedOpt" :key="item.value" :label="item.name" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item style="text-align: center;width: 100%;">
                            <el-button @click="addSubmit('merchantDataForm')" type="primary">保存</el-button>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="证书">
                        <el-form-item label="证书编号：">
                            <el-input v-model="merchantCredential.number" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="证书：" prop="image">
                            <img :src="merchantCredential.image" style="cursor: pointer" @click="lookPic(merchantCredential.image)" />
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="服务">
                        <el-form inline style="margin-top: 20px;">
                            <el-form-item label="所选服务：" style="display: block;">
                                <el-tag v-for="(item,index) in multipleSelection" :key="index" closable @close="handleClose(item,index)" style="margin-right: 3px;">{{item.name  +'【'+ item.serviceCategoryName+'】'}}</el-tag>
                            </el-form-item>
                            <el-form-item label="服务分类：" prop="serviceCategoryId">
                                <el-cascader clearable :options="serviceCategoryOpt" :props="optionProps" v-model="serviceCategoryId" change-on-select></el-cascader>
                            </el-form-item>
                            <el-button @click="serviceList" type="primary">查询服务分类</el-button>
                        </el-form>
                        <el-table :data="serviceTableData" ref="multipleTables" style="width: 100%;" border row-key="id" id="treeTable" @select="handleSelectionChange" @select-all="selectAll">
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column prop="name" label="名称" width="180" align="center" ></el-table-column>
                            <el-table-column prop="serviceLevelName" label="服务级别" width="180" align="center" ></el-table-column>
                            <el-table-column prop="serviceCategoryName" :formatter="serviceCategoryNameFun" label="服务分类" width="180" align="center" ></el-table-column>
                            <el-table-column prop="summary" label="摘要" align="center" show-overflow-tooltip></el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <el-pagination @current-change="serviceGetList" layout="total, prev, pager, next, jumper" :total="servicePageData.totalElements"></el-pagination>
                        <el-form-item style="text-align: center;width: 100%;">
                            <el-button @click="addSubmit('merchantDataForm')" type="primary">保存</el-button>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="相册">
                        
                        <el-tabs type="card">
                            <el-tab-pane label="公司照片">
                                <el-row>
                                    <el-col :span="6" v-for="(url,index) in merchantAlbumImageList" :key="index" style="text-align: center;margin-bottom: 10px;">
                                        <el-image style="width: 150px; height: 150px;cursor: pointer" :src="url.image" fit="contain" @click.native="lookPic(url.image)"></el-image>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="公司证书">
                                <el-row>
                                    <el-col :span="6" v-for="(url,index) in merchantAlbumCertificateList" :key="index" style="text-align: center;margin-bottom: 10px;">
                                        <el-image style="width: 150px; height: 150px;cursor: pointer" :src="url.image" fit="contain" @click.native="lookPic(url.image)"></el-image>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="主页">
                        <el-form-item label="公司介绍：" prop="businessScope">
                            <el-input v-model="merchantHomePage.businessScope" type="textarea" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="服务时间：" prop="serviceTime">
                            <el-input v-model="merchantHomePage.serviceTime" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="经营范围：" prop="description">
                            <el-input v-model="merchantHomePage.description" type="textarea" disabled></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="申请">
                        <el-form-item label="公司名称：" prop="companyName">
                            <el-input v-model="merchantApply.companyName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="描述：" prop="description">
                            <el-input v-model="merchantApply.description" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="区域：" prop="districtName">
                            <el-input v-model="merchantApply.districtName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="加盟商类型：" prop="merchantTypeName">
                            <el-input v-model="merchantApply.merchantTypeName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话：" prop="phone">
                            <el-input v-model="merchantApply.phone" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="负责人：" prop="principal">
                            <el-input v-model="merchantApply.principal" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="用户：" prop="mobile">
                            <el-input v-model="merchantApply.mobile" disabled></el-input>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-dialog>
        <!-- 放大图片 -->
        <el-dialog :visible.sync="dialogPicVisible" text-center>
            <img :src="nowBigPic" alt="" width="100%">
        </el-dialog>
    </div>
</template>
<script>
import { findMerchantApply } from '@/api/service-provider/merchant-apply'
import { findMerchantType } from '@/api/service-provider/merchant-type'
import { findDistrictAllRegion } from '@/api/system/district-module/region'
import { findService } from '@/api/service/customize-service-level'
import { findServiceCategory } from '@/api/service/service-category'
import { addRecord, findRecord, codeRecord, detailRecord, editRecord, enableRecord, delRecord } from '@/api/service-provider/merchant'
import { uploadPic, getPic } from '@/api/uploadPic'
import { truncate } from 'fs';
import { constants } from 'crypto';
import { isvalidPhone, isvalidNumberS } from '@/utils/validate'
export default {
    name: 'Merchant',
    data() {
        const validatePhone = (rule, value, callback) => {
            if (!isvalidPhone(value)) {
                callback(new Error('手机号为11位数字，如18688889999'))
            }else{
                callback()
            }
        }
        const validNumberS = (rule, value, callback) => {
            if (!isvalidNumberS(value)) {
                callback(new Error('请输入数字或者-'))
            }else{
                callback()
            }
        }
        return{
            tableData: [],
            nowTit: '',
            nowId: '',
            showDialog: false,
            searchForm:{
                districtId: [],
                merchantTypeId: '',
                companyName: '',
                principalPhone: ''
            },
            merchantDataForm: {
                merchantApplyId: '',
                districtId: '',
                merchantTypeId: '',
                companyName: '',
                address: '',
                principal: '',
                principalPhone: '',
                servicePhone: '',
                description: '',
                franchiseFee: '',
                startTime: '',
                endTime: '',
                authorizationTime: '',
                longitude: '',
                latitude: '',
                locked: 1,
                merchantServiceList: [],
                logo: '',
            },
            merchantRules: {
                principalPhone: [
                    {  required: true,trigger: 'blur', validator: validatePhone }
                ],
                servicePhone: [
                    {  required: true,trigger: 'blur', validator: validNumberS }
                ],
                merchantTypeId: [
                    { required: true, message: '请选择加盟商类型', trigger: 'change' }
                ],
                companyName: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入 街道（镇） / 门牌号', trigger: 'blur' }
                ],
                principal: [
                    { required: true, message: '请输入负责人姓名', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入描述', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入描述', trigger: 'blur' }
                ],
                franchiseFee: [
                    { required: true, message: '请输入加盟费用', trigger: 'blur' }
                ],
                startTime: [
                    { required: true, message: '请选择加盟开始时间', trigger: 'change' }
                ],
                endTime: [
                    { required: true, message: '请选择加盟过期时间', trigger: 'change' }
                ],
                authorizationTime: [
                    { required: true, message: '请选择授权时间', trigger: 'change' }
                ],
            },
            merchantSearchForm: {
                phone: '',
            },
            merchantApplyNowPage: 0,
            merchantApplyPageSize: 10,
            nowPage: 0,
            pageSize: 10,
            imageUrl: '',
            formData: {},
            popStatus: 0,  //0为添加，1为修改
            pageData: {},
            applicationIdOpt: [],
            districtList: [],
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            lockedOpt: [
                {name: '正常',value: 1,},
                {name: '锁定',value: 0,}
            ],
            merchantTypeOpt: [],
            isIndeterminate: true,
            showDetailDialog: false,
            dialogPicVisible: false,
            nowBigPic: '',
            merchantApplyPageData: {},
            merchantApplytableData: [],
            currentRow: null,
            merchantDistrictId: [],
            addMerchantData: false,
            nowInfo: {},
            merchantCredential: {
                image: '',
                number: '',
            },
            merchantHomePage: {
                businessScope: '',
                description: '',
                serviceTime: '',
            },
            merchantAlbumList: {},
            serviceEntityVo: {},
            merchantApply: {},
            serviceTableData: [],
            servicePageData: {},
            serviceNowPage: 0,
            servicePageSize: 10,
            multipleSelection: [],
            serviceCategoryOpt: [],
            serviceCategoryId: [],
            serviceContent: false,
            searchCate: 0,
            merchantAlbumImageList: [],
            merchantAlbumCertificateList: [],
            searchState: false,
            nowPic: '',
            pickerOptionsStart: {
                disabledDate: time => {
                    if (this.merchantDataForm.endTime) {
                        return time.getTime() > new Date(this.merchantDataForm.endTime).getTime()
                    }
                }
            },
            pickerOptionsEnd: {
                disabledDate: time => {
                    if (this.merchantDataForm.startTime) {
                        return time.getTime() < new Date(this.merchantDataForm.startTime).getTime()
                    }
                }
            },
        }
    },
    methods: {
        //默认函数
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            let cid = '';
            if(this.searchForm.districtId.length != 0){
                cid = this.searchForm.districtId[this.searchForm.districtId.length - 1];
            }
            _this.tableData = [];
            //获取列表信息
            findRecord(cid, _this.searchForm.merchantTypeId, _this.searchForm.companyName,_this.searchForm.principalPhone, _this.nowPage, _this.pageSize).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object
                    _this.tableData = response.object.content
                    // if(response.object.content){
                    //     if(response.object.content.length>0){
                    //         for (const key in response.object.content) {
                    //             //处理图片
                    //             if(response.object.content[key].logo){
                    //                 getPic(response.object.content[key].logo).then(res => {
                    //                     if(res.code == 200){
                    //                         response.object.content[key].showpic = res.object;
                    //                         _this.tableData.push(response.object.content[key]);
                    //                     }else{
                    //                         this.$message.error(res.message);
                    //                     }
                    //                 })
                    //             }else{
                    //                 response.object.content[key].showpic = '';
                    //                 _this.tableData.push(response.object.content[key]);
                    //             }

                    //         }
                    //     }else{
                    //         _this.tableData = []
                    //     }
                    // }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //商家类型
        merchantTypeList(){
            const _this = this;
            //获取列表信息
            findMerchantType( 0, 10000).then(response => {
                if(response.code == 200){
                    if(response.object){
                        _this.merchantTypeOpt = response.object.content;
                    }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //加盟申请
        merchantApplyList(){
            const _this = this;
            //获取列表信息
            findMerchantApply(_this.merchantApplyNowPage, _this.merchantApplyPageSize,'', '',_this.merchantSearchForm.phone, 1).then(response => {
                if(response.code == 200){
                    _this.merchantApplyPageData = response.object;
                    _this.merchantApplytableData = response.object.content;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //区域
        districtFun(){
            const _this = this;
            //获取列表信息
            findDistrictAllRegion().then(response => {
                if(response.code == 200){
                    _this.districtList = _this.getTreeData(response.object);
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //递归
        getTreeData(data){
            for(var i=0;i<data.length;i++){
                if((data[i].children == null) || (data[i].children.length<1)){
                    data[i].children=undefined;
                }else {
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        },
        //服务
        serviceList(type){
            const _this = this;
            _this.searchCate = 1;
            if(type){   //查询事件
                _this.searchState = true
            }
            let sid = '';
            if(_this.serviceCategoryId.length > 0){
                sid = _this.serviceCategoryId[_this.serviceCategoryId.length - 1];
            }
            //获取列表信息
            findService( _this.serviceNowPage, _this.servicePageSize,sid).then(response => {
                if(response.code == 200){
                    if(response.object){
                        _this.servicePageData = response.object;
                        if(response.object.content){
                            _this.serviceTableData = response.object.content;
                            //判断当前列表是否有已选中的服务
                            _this.serviceTableData.forEach(item=>{  //当前所有列表
                                _this.multipleSelection.forEach(select=>{   //已选中
                                    if(item.id == select.id){
                                        select.selected = true;
                                        _this.$nextTick(function () {
                                            _this.popStatus == 0 ? _this.$refs.multipleTable.toggleRowSelection(item, true) : _this.$refs.multipleTables.toggleRowSelection(item, true);
                                        })
                                    }
                                })
                            })
                        }
                    }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //服务分类
        serviceCategoryList(){
            const _this = this;
            //获取列表信息
            findServiceCategory(0, 10000).then(response => {
                if(response.code == 200){
                    _this.serviceCategoryOpt = _this.getTreeData(response.object.content);
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //添加
        addClick(){
            this.addMerchantData = false;
            this.multipleSelection = [];
            this.serviceTableData = [];
            this.merchantApplyList();
            this.popStatus = 0;
            this.showDialog = true;
            this.merchantDataForm.districtId = '';
            this.merchantDistrictId = [];
            this.merchantDataForm.merchantTypeId = '';
            this.merchantDataForm.companyName = '';
            this.merchantDataForm.principal = '';
            this.merchantDataForm.principalPhone = '';
            this.merchantDataForm.description = '';
            this.merchantDataForm.merchantApplyId = '';
            this.merchantDataForm.address = '';
            this.merchantDataForm.servicePhone = '';
            this.merchantDataForm.franchiseFee = '';
            this.merchantDataForm.startTime = '';
            this.merchantDataForm.endTime = '';
            this.merchantDataForm.authorizationTime = '';
            this.merchantDataForm.longitude = '';
            this.merchantDataForm.latitude = '';
            this.merchantDataForm.locked = 1;
            this.merchantDataForm.sysUserId = '';
            this.merchantDataForm.merchantServiceList = [];
            this.merchantDataForm.logo = '';
            this.imageUrl = '';
            if(this.merchantDataForm.id){
                delete this.merchantDataForm.id;
            }
            
        },
        //提交添加
        addSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //提交

                    //服务
                    if(_this.multipleSelection.length != 0){
                        _this.merchantDataForm.merchantServiceList = [];
                        _this.multipleSelection.forEach(row => {
                            _this.merchantDataForm.merchantServiceList.push({'serviceId':row.id})
                        });
                    }
                    if(_this.merchantDistrictId.length > 0){
                        _this.merchantDataForm.districtId = _this.merchantDistrictId[_this.merchantDistrictId.length - 1];
                    }
                    if(_this.popStatus == 0){  //添加
                        addRecord(_this.merchantDataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }else if(_this.popStatus == 1){  //修改
                        _this.merchantDataForm.id = _this.nowId;
                        editRecord(_this.merchantDataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDetailDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删
        delClick(row){
            let _this = this;
            this.$confirm('确定删除 '+row.companyName+' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除
                delRecord(row.id).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        //加盟申请分页
        merchantApplyGetList(val) {
            this.merchantApplyNowPage = val - 1;
            this.merchantApplyList();
        },
        //服务分页
        serviceGetList(val) {
            this.serviceNowPage = val - 1;
            this.serviceList();
        },
        //放大图片
        lookPic(pic){
            this.nowBigPic = pic;
            this.dialogPicVisible = true;
        },
        applyStatusFun(row){
            if(row.applyStatus == 0){
                return '审核中'
            }else if(row.applyStatus == 1){
                return '申请通过'
            }else if(row.applyStatus == -1){
                return '申请失败'
            }
        },
        //选择加盟申请
        handleCurrentChange(val){
            if(val){
                this.addMerchantData = true;
                this.currentRow = val;
                //初始值
                this.merchantDataForm.districtId = val.districtId;
                //处理区域id
                if(val.districtList){
                    let arr = [];
                    for (const key in val.districtList) {
                        if (val.districtList.hasOwnProperty(key)) {
                            const element = val.districtList[key];
                            arr.push(element.id);
                        }
                    }
                    this.merchantDistrictId = arr;
                }
                this.merchantDataForm.merchantTypeId = val.merchantTypeId;
                this.merchantDataForm.companyName = val.companyName;
                this.merchantDataForm.principal = val.principal;
                this.merchantDataForm.principalPhone = val.phone;
                this.merchantDataForm.description = val.description;
                this.merchantDataForm.merchantApplyId = val.id;
                this.merchantDataForm.sysUserId = val.sysUserId;
            }
        },
        //查看详情
        detailsClick(row){
            const _this = this;
            _this.popStatus = 1;
            _this.nowId = row.id;
            detailRecord(row.id).then(response => {
                if(response.code == 200){
                    _this.nowInfo = response.object;  //所有详情信息
                    if(response.object.merchantCredential){
                        _this.merchantCredential = response.object.merchantCredential;  //证书
                        //处理图片
                        // if(_this.merchantCredential.image){
                        //     getPic(_this.merchantCredential.image).then(res => {
                        //         if(res.code == 200){
                        //             _this.merchantCredential.image = res.object;
                        //         }else{
                        //             this.$message.error(res.message);
                        //         }
                        //     })
                        // }
                    }
                    if(response.object.merchantHomePage){
                        _this.merchantHomePage = response.object.merchantHomePage;  //主页
                    }
                    if(response.object.merchantAlbumList){
                        _this.merchantAlbumList = response.object.merchantAlbumList;  //相册
                        _this.merchantAlbumImageList = [];
                        _this.merchantAlbumCertificateList = [];
                        //处理图片
                        const obj = response.object.merchantAlbumList;
                        for (let i=0; i<obj.length; i++) {
                            // getPic(obj[i].photo).then(res => {
                            //     if(res.code == 200){
                                    if(obj[i].albumType == 1){  //公司照片
                                        // _this.merchantAlbumImageList.push({ image: res.object })
                                        _this.merchantAlbumImageList.push({ image: obj[i].photo })
                                    }else if(obj[i].albumType == 2){  //公司证书
                                        // _this.merchantAlbumCertificateList.push({ image: res.object })
                                        _this.merchantAlbumCertificateList.push({ image: obj[i].photo })
                                    }
                            //     }else{
                            //         this.$message.error(res.message);
                            //     }
                            // })
                        }
                    }else{
                        _this.merchantAlbumList = [];  //相册
                        _this.merchantAlbumImageList = [];
                        _this.merchantAlbumCertificateList = [];
                    }
                    _this.serviceEntityVo = response.object.serviceEntityVo;  //服务
                    _this.serviceTableData = response.object.serviceEntityVo;  //默认选中服务列表
                    _this.multipleSelection = response.object.serviceEntityVo;  //默认选中tag
                    _this.multipleSelection.forEach(item=>{
                        item.selected = true;
                    })
                    if(response.object.merchantApplyEntityVo){
                        _this.merchantApply = response.object.merchantApplyEntityVo;  //申请
                    }else{
                        _this.merchantApply = {}
                    }
                    //服务处理
                    if(response.object.serviceEntityVo && response.object.serviceEntityVo.length > 0){
                        const rows = response.object.serviceEntityVo;
                        _this.$nextTick(function () {
                            rows.forEach(row => {
                                _this.$refs.multipleTables.toggleRowSelection(row);
                            });
                        })
                    }
                    _this.merchantDataForm.districtId = response.object.districtId;
                    //处理所属项目id
                    if(response.object.districtList){
                        let arr = [];
                        for (const key in response.object.districtList) {
                            if (response.object.districtList.hasOwnProperty(key)) {
                                const element = response.object.districtList[key];
                                arr.push(element.id);
                            }
                        }
                        _this.merchantDistrictId = arr;
                    }
                    _this.merchantDataForm.merchantTypeId = response.object.merchantTypeId;
                    _this.merchantDataForm.companyName = response.object.companyName;
                    _this.merchantDataForm.principal = response.object.principal;
                    _this.merchantDataForm.principalPhone = response.object.principalPhone;
                    _this.merchantDataForm.description = response.object.description;
                    _this.merchantDataForm.merchantApplyId = response.object.merchantApplyId;
                    _this.merchantDataForm.address = response.object.address;
                    _this.merchantDataForm.servicePhone = response.object.servicePhone;
                    _this.merchantDataForm.franchiseFee = response.object.franchiseFee;
                    _this.merchantDataForm.startTime = response.object.startTime;
                    _this.merchantDataForm.endTime = response.object.endTime;
                    _this.merchantDataForm.authorizationTime = response.object.authorizationTime;
                    _this.merchantDataForm.longitude = response.object.longitude;
                    _this.merchantDataForm.latitude = response.object.latitude;
                    _this.merchantDataForm.locked = response.object.locked;
                    _this.merchantDataForm.sysUserId = response.object.sysUserId;
                    // if(row.logo){
                    //     _this.imageUrl = row.showpic;
                    // }else{
                    //     _this.imageUrl = '';
                    // }
                    _this.imageUrl = row.logo
                    _this.showDetailDialog = true;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //服务 多选
        handleSelectionChange(select,val) {
            const _this = this;
            let sign = 0;
            _this.multipleSelection.forEach((item,index)=>{
                if(_this.searchState === true){  //查询事件
                    if(item.id == val.id && item.selected){  // 已选服务  取消选中
                        sign++;
                        item.selected = false;
                        _this.$nextTick(function () {
                            _this.popStatus == 0 ? _this.$refs.multipleTable.toggleRowSelection(item, false) : _this.$refs.multipleTables.toggleRowSelection(item, false);
                        })
                    }else if(item.id == val.id && !item.selected){  // 未选服务  需选中
                        sign++;
                        item.selected = true;
                        _this.$nextTick(function () {
                            _this.popStatus == 0 ? _this.$refs.multipleTable.toggleRowSelection(item, true) : _this.$refs.multipleTables.toggleRowSelection(item, true);
                        })
                    }
                }else if(_this.searchState === false){
                    if(item.id == val.id && item.selected){  // 已选服务  取消选中
                        sign++;
                        item.selected = false;
                        _this.$nextTick(function () {
                            _this.popStatus == 0 ? _this.$refs.multipleTable.toggleRowSelection(item, false) : _this.$refs.multipleTables.toggleRowSelection(item, false);
                            _this.multipleSelection.splice(index,1);
                        })
                    }else if(item.id == val.id && !item.selected){  // 未选服务  需选中
                        sign++;
                        item.selected = true;
                        _this.$nextTick(function () {
                            _this.popStatus == 0 ? _this.$refs.multipleTable.toggleRowSelection(item, true) : _this.$refs.multipleTables.toggleRowSelection(item, true);
                        })
                    }
                }
                
            })
            if(sign == 0){
                _this.multipleSelection.push(val);
            }
        },
        //服务  全选
        selectAll(rows){
            const _this = this;
            if(_this.searchCate == 0){  //初始默认选中
                this.multipleSelection = [];
                this.$refs.multipleTables.clearSelection();
            }else{  //分类下选中
                //判断当前列表服务是否已全部选中
                let sign = 1;  //标记全选状态
                let serviceIdArr = [];  //当前列表都有服务id
                let multipleIdArr = [];  //已选中所有服务id
                _this.serviceTableData.forEach(item=>{  //当前所有列表
                    serviceIdArr.push(item.id);
                })
                _this.multipleSelection.forEach(select=>{   //已选中
                    multipleIdArr.push(select.id);
                })
                //判断是否是全选状态    是：则取消当前列表服务所有选中状态            否：则选中当前列表服务所有选中状态
                for(let i=0;i<serviceIdArr.length;i++){
                    if(multipleIdArr.indexOf(serviceIdArr[i]) == -1){   //不是全选状态
                        sign = 1;
                        break
                    }else{
                        sign++;
                    }
                    if(i == serviceIdArr.length-1){
                        break
                    }
                }

                if(sign != 1){  //全选状态
                    serviceIdArr.forEach((item,index)=>{
                        _this.multipleSelection.forEach((select,index)=>{
                            if(select.id == item){
                                _this.multipleSelection.splice(index,1);
                            }
                        })
                    })
                }else if(sign == 1){
                    serviceIdArr.forEach((item,index)=>{
                        if(multipleIdArr.indexOf(item) == -1){
                            _this.serviceTableData[index].selected = true;
                            _this.multipleSelection.push(_this.serviceTableData[index]);
                        }
                    })
                }
            }
        },
        //移除所选服务
        handleClose(item,ind){
            const _this = this;
            if(_this.searchCate == 0){  //初始默认选中
                //判断当前列表是否有已选中的服务
                _this.multipleSelection.forEach((row,index)=>{
                    if(row.id == item.id){
                        _this.$nextTick(function () {
                            _this.popStatus == 0 ? _this.$refs.multipleTable.toggleRowSelection(item, false) : _this.$refs.multipleTables.toggleRowSelection(item, false);
                            _this.multipleSelection.splice(index,1);
                        })
                    }
                })
            }else{  //分类下选中
                _this.multipleSelection.splice(ind,1);
                _this.serviceList();
            }
        },
        //添加服务
        addService(){
            this.multipleSelection = [];
            this.serviceTableData = [];
            this.serviceContent = true;
        },
        serviceCategoryNameFun(row){
            //处理所属部门name
            if(row.serviceCategoryList){
                let arr = '';
                for (const key in row.serviceCategoryList) {
                    if (row.serviceCategoryList.hasOwnProperty(key)) {
                        const element = row.serviceCategoryList[key];
                        arr += element.name + ' / '
                    }
                }
                return arr.substr(0,arr.length - 3)
            }
        },
        //自定义上传
        UploadImage(param){
            const _this = this;
            //上传图片
            let formData = new FormData();
            formData.append('photoFile', param.file);
            formData.append('dir', 'Merchant');
            formData.append('fileType', '1');
            uploadPic(formData).then(response => {
                if(response.code == 200){
                    _this.merchantDataForm.logo = response.object.saveImage;
                    this.imageUrl = response.object.showImage;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //准备上传
        beforeAvatarUpload(file){
            const isJPG = file.type;
            const isLt2M = file.size / 1024 / 1024 < 5;
            if(((isJPG === 'image/jpeg') || (isJPG === 'image/png') || (isJPG === 'image/jpg') || (isJPG === 'image/gif') || (isJPG === 'image/JPEG') || (isJPG === 'image/PNG') || (isJPG === 'image/JPG') || (isJPG === 'image/GIF')) == false){
                this.$message.error('上传图片只能是 jpeg、png、jpg、gif 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 5MB!');
            }
            return isJPG && isLt2M;
        },
    },
    mounted(){
        this.init();
        this.merchantTypeList();
        this.districtFun();
        this.serviceCategoryList();
    }
}
</script>
<style>
    #treeTable .el-icon-arrow-right:before{
        color: #2196f3;
        font-weight: bold;
        /* content: "\E6DC"; */
        content: "\E791";
    }
    #treeTable .el-table__row,#treeTable .el-table__row.el-table__row--level-0{
        background: #e8f4ff;
    }
    #treeTable .el-table__row.el-table__row--level-1{
        background: #f0f9eb;
    }
    #treeTable .el-table__row.el-table__row--level-2{
        background: oldlace;
    }
    #treeTable tr.hover-row > td{
        background-color: initial;
    }
    #treeTable.el-table th > .cell{
        text-align: center;
    }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>